<template>
  <div class="FcUserSelect">
    <el-select
        v-bind="attrs"
        v-model="showValue"
        filterable
        remote
        reserve-keyword
        remote-show-suffix
        :remote-method="remoteMethod"
        :loading="loading"
        :value-key="valueKey"
    >
      <el-option :key="item[valueKey]" v-for="(item,index) in options" :label="item[labelKey]" :value="item">
        {{ item[labelKey] }}
        <el-divider direction="vertical"></el-divider>
        {{ item[valueKey] }}
      </el-option>
    </el-select>
  </div>
</template>
<script setup name="FcUserSelect">
import {isNotEmptyArray} from "@/views/flow/tool.js";
import {
  listByUserIds,
  listUser
} from "@/api/system/user.js";
import {onMounted} from "vue";
import {setLableAndValueInOptions} from "@/views/flow/formCompoents/fcTool.js";
const loading = ref(false);
const ready = ref(false);
const options = ref([]);
const attrs = useAttrs();
const emits = defineEmits(['update:modelValue']);
const props = defineProps({
  modelValue: {
    type: [Array],
    default: () => null
  },
  valueKey: {
    type: String,
    default: 'userId'
  },
  labelKey: {
    type: String,
    default: 'userName'
  }
});
const remoteMethod = (query) => {
  loading.value = true
  listUser({
    [props.labelKey]: query
  })
      .then(res => {
        options.value = setLableAndValueInOptions({
          props,
          options: res['rows']
        })
        loading.value = false
      })
}
onMounted(() => {
})
const showValue = computed({
  get() {
    if (attrs.multiple) {
      return isNotEmptyArray(props.modelValue) ? props.modelValue : undefined;
    } else {
      return isNotEmptyArray(props.modelValue) ? props.modelValue[0] : undefined;
    }
  },
  set(val) {
    if (attrs.multiple) {
      emits('update:modelValue',
          val);
    } else {
      emits('update:modelValue',
          [val]);
    }
  }
});
</script>
<style scoped lang="scss">
.FcUserSelect {
}
</style>
